<template>
	<view class="myAuth">
		<view class="add" v-if="status">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="form1">
				<u-form-item label="店铺名称" prop="name" borderBottom ref="item1" labelWidth="80" :required="type!=1">
					<u--input v-model="formData.name" border="none" placeholder="请输入店铺名称" type="text">
					</u--input>
				</u-form-item>
				<u-form-item label="店铺LOGO" prop="logo" :borderBottom="true" ref="item1" labelWidth="80"
					labelPosition="top">
					<imgUpload code="zsbm" placeholder="请上传图片" :limit="1" @upImgs="upImgs" ref="imgUpload"
						:imageArr="logImgArr" :disable="type==1" :showdel="type!=1"></imgUpload>
				</u-form-item>
				<u-form-item label="手机号码(账号)" prop="account" borderBottom ref="item1" labelWidth="80"
					:required="type!=1">
					<u--input v-model="formData.account" border="none" placeholder="请输入手机号码" maxlength="11"
						type="number">
					</u--input>
				</u-form-item>
				<u-input style="height: 0;border:0;padding:0"/> 
				<u-form-item label="密码" :prop="token?'':password" borderBottom ref="item1" labelWidth="80"
					:required="token?false:true">
					<u--input v-model="formData.password" border="none" placeholder="请输入密码" type="password">
					</u--input>
				</u-form-item>
				<u-form-item label="店铺描述" prop="refer" borderBottom ref="item3">
					<u--textarea placeholder="不低于3个字" v-model="formData.refer" count></u--textarea>
				</u-form-item>
				<view class="adressDiv">
					<u-form-item label="详细地址" prop="address" borderBottom ref="item3" labelWidth="80" :required="true">
						<view class="other-list">
							<view class="right">
								<view class="myAddress">
									<view class="cityAddres">
										<view class="top">
											{{formData.address}}
										</view>
										<view class="city" @click="goMap">
											<u-icon name="map" color="#00C777" size="18" class="top"></u-icon>
											<view>坐标</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</u-form-item>
				</view>
				<u-form-item label="店铺联系人" prop="door_contacts" borderBottom ref="item1" labelWidth="100"
					:required="type!=1">
					<u--input v-model="formData.door_contacts" border="none" placeholder="请输入店铺联系人" type="text">
					</u--input>
				</u-form-item>
				<u-form-item label="门店联系电话" prop="telephone" borderBottom ref="item1" labelWidth="100"
					:required="type!=1">
					<u--input v-model="formData.telephone" border="none" placeholder="请输入门店联系电话" maxlength="11"
						type="number">
					</u--input>
				</u-form-item>
				<u-form-item label="核销收款账号" borderBottom ref="item1" labelWidth="100" :required="false">
					<u--input v-model="formData.account_number" border="none" placeholder="请输入核销收款账号" 
						type="number">
					</u--input>
				</u-form-item>
				<u-form-item label="门头照" prop="door_image" :borderBottom="true" ref="item1" labelWidth="80"
					labelPosition="top">
					<imgUpload code="zsbm" placeholder="请上传图片" :limit="1" @upImgs="upImgs1" ref="imgUpload1"
						:imageArr="logImgArr1" :disable="type==1" :showdel="type!=1"></imgUpload>
				</u-form-item>
				<u-form-item label="营业执照" prop="license_image" :borderBottom="true" ref="item1" labelWidth="80"
					labelPosition="top">
					<imgUpload code="zsbm" placeholder="请上传图片" @upImgs="upImgs2" ref="imgUpload2" :imageArr="logImgArr2"
						:disable="type==1" :showdel="type!=1"></imgUpload>
				</u-form-item>
				<u-form-item label="店内照片" :borderBottom="true" ref="item1" labelWidth="80" labelPosition="top">
					<imgUpload code="zsbm" placeholder="请上传图片" @upImgs="upImgs4" ref="imgUpload4" :imageArr="logImgArr4"
						:limit="6" :disable="type==1" :showdel="type!=1"></imgUpload>
				</u-form-item>
				<u-form-item label="收款二维码" :borderBottom="true" ref="item1" labelWidth="80" labelPosition="top">
					<imgUpload code="zsbm" placeholder="请上传图片" :limit="1" @upImgs="upImgs3" ref="imgUpload3"
						:imageArr="logImgArr3" :disable="type==1" :showdel="type!=1"></imgUpload>
				</u-form-item>
				<!-- <u-form-item label="压缩图片" :borderBottom="true" ref="item1" labelWidth="80" labelPosition="top">
					<cusImg code="zsbm" placeholder="请上传图片"></cusImg>
				</u-form-item> -->
			</u--form>
			<view class="botBtn">
				<view style="width: 100%;">
					<u-button class="custom-style" text="提交"
						customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #C7EACE 100%);color:#fff;margin-top:20px;border-radius: 30px;"
						@click="goAuth">
					</u-button>
				</view>
			</view>
		</view>
		<view class="success" v-else>
			<view class="u-content">
				<view class="u-content__circle">
					<u-icon name="checkmark-circle-fill" color="#2CB9A4" size="60"></u-icon>
				</view>
			</view>
			<view class="title">
				您已入驻商家成功！
			</view>
			<view class="btn-succss">
				<u-button class="" shape="circle" text="去修改商家信息"
					customStyle="background-color:  #2CB9A4;color:#fff" @click="goBack">
				</u-button>
			</view>
		</view>
		<m-tabbar native>
		</m-tabbar>
	</view>
</template>
<style>
	page {
		background-color: #fff;
	}
</style>
<script>
	import eventBUs from '../../utils/eventBus.js'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	import imgUpload from '@/components/common/imgUpload.vue'
	import uploadImage from '@/components/common/upload-image.vue'
	import cusImg from '@/components/common/cusImg/cusImg.vue'//压缩图片的组件
	import {
		merchantRego,
		getMerchant,
		merchantUpdate
	} from '@/request/api.js'
	export default {
		components: {
			vvSelect,
			imgUpload,
			uploadImage,
			cusImg
		},
		data() {
			return {
				status:true,
				logImgArr: [],
				logImgArr1: [],
				logImgArr2: [],
				logImgArr3: [],
				logImgArr4: [],
				mapData: null,
				actions: [],
				showSex: false,
				formData: {
					account: "",
					password: '',
					name: '',
					logo: '',
					refer: '',
					address: '',
					lon: '',
					lat: '',
					door_image: '', //门头照
					images: '', //店内或场地营业照片
					license_image: '', //营业执照
					door_contacts: '', //	店铺联系人
					telephone: '', //	店铺联系号码
					account_number: '', //收款账号
					account_image: '', //二维码收款
					classify:'',
					regionserviceuser_id:''
				},
				ibecName: '',
				token: '',
				rules: {
					'door_contacts': {
						required: true,
						message: '请输入店铺联系人',
						trigger: ['change', 'blur'],
					},
					'name': {
						required: true,
						message: '请输入店铺名称',
						trigger: ['change', 'blur'],
					},
					'account': {
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur'],
						max: 11,
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
					},
					'password': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'telephone': {
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur'],
						max: 11,
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						}
					},
					'account_number': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入核销收款账号',
						trigger: ['blur', 'change']
					},
					'logo': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请上传店铺LOGO',
						trigger: ['blur', 'change']
					},
					'door_image': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请上传门头照',
						trigger: ['blur', 'change']
					},
					'license_image': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请上传营业执照',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请选择详情地址',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(res) {
			// console.log(res)
			uni.$on('map', e=>{
				console.log(e,'map')
				this.formData.address = e.address
				this.formData.lon = e.longitude
				this.formData.lat = e.latitude
				this.formData.classify = e.classify
				this.$refs.form1.validateField('address')
			})
			if (res.id == 1) {
				let token = uni.getStorageSync('shopToken')
				this.token = token;
				this.getMerchant()
			}
		},
		onHide() {
			// this.empt()
			this.status = true
			window.sessionStorage.setItem('mapData', '');
		},
		onShow() {
			// let map = uni.getStorageSync('mapData')
			// console.log(map,222)
			let map = window.sessionStorage.getItem('mapData');

			// console.log(map,222)
			if (map) {
				this.mapData = JSON.parse(map)
				// console.log(this.mapData, 222)
				this.formData.address = this.mapData.address
				this.formData.lon = this.mapData.lng
				this.formData.lat = this.mapData.lat
				this.formData.classify = this.mapData.classify
				this.$refs.form1.validateField('address')
			}
			let token = uni.getStorageSync('shopToken')
			this.token = token;
			let emptObj = JSON.stringify(token) == "{}";
			let self = this
			// console.log(emptObj, token,1111)
			
			setImmediate(()=>{
				if (token) {
					// this.getMerchant()
					self.status = false;
				}else{
					self.status = true;
				}
			})
		},
		methods: {
			goBack() {
				uni.navigateTo({
					url: '/pages/alterShopInfo/alterShopInfo?id=1'
				})
			},
			empt() {
				for (let k in this.formData) {
					this.formData[k] = ''
				}
				this.logImgArr = []
				this.logImgArr1 = []
				this.logImgArr2 = []
				this.logImgArr3 = []
				this.logImgArr4 = []
			},
			async getMerchant() {
				let res = await getMerchant()
				console.log(res)
				// this.formData = res.data.merchant
				// this.logImgArr.push({ //显示logo图片
				// 	url: this.formData.logo
				// })
				// this.formData['account'] = res.data.mobile;
				// this.logImgArr1.push({ //显示logo图片
				// 	url: this.formData.door_image
				// })
				// this.logImgArr2.push({
				// 	url: this.formData.license_image
				// })
				// this.logImgArr3.push({
				// 	url: this.formData.account_image
				// })
				// this.logImgArr4.push({ //店内照片
				// 	url: this.formData.images
				// })
				// this.$refs.form1.setRules(this.rules)
				// console.log(res)
			},
			upImgs4(e) {
				let arr = e.images
				this.formData.images = arr.join(',') //收款二维码
				// this.$refs.form1.validateField('account_image')
				console.log(e, this.formData.images, 'images');
			},
			upImgs3(e) {
				let arr = e.images
				this.formData.account_image = arr.join(',') //收款二维码
				// this.$refs.form1.validateField('account_image')
				console.log(e, this.formData.account_image, 'account_image');
			},
			upImgs2(e) {
				let arr = e.images
				this.formData.license_image = arr.join(',') //营业执照
				this.$refs.form1.validateField('license_image')
				console.log(e, this.formData.license_image, 'license_image');
			},
			upImgs1(e) {
				let arr = e.images
				this.formData.door_image = arr.join(',') //门头照
				this.$refs.form1.validateField('door_image')
				console.log(e, this.formData.door_image, 'door_image');
			},
			upImgs(e) {
				let arr = e.images
				this.formData.logo = arr.join(',') //门头照
				this.$refs.form1.validateField('logo')
				console.log(e, this.formData.logo, 'logo');
			},
			goMap() {
				uni.navigateTo({
					// url: "/my_pages/wxAccounts/wxAccounts"
					url:"/components/common/mapInfo"
				})
			},
			pickerChange(e, name) {
				// console.log(e,name)
				this.formData.ibec_id = e.toString()
				this.$refs.form1.validateField('ibec_id')
			},
			async getUser() {
				let res = await getStaff()
				this.formData.name = res.data.ibec.name
				this.formData.ibec_id = res.data.ibec.id
				this.formData.mobile = res.data.mobile
				uni.setStorageSync('userInfo', res.data)
				this.$eventBus.$emit('hasLogin', true);
			},
			async getIbec() {
				let res = await getIbec()
				this.actions = res.data
				console.log(this.actions)
			},
			select(e) {
				this.formData.name = e.name
				this.formData.ibec_id = e.id
				this.$refs.form1.validateField('ibec_id')
			},
			async merchantUpdate() {
				console.log(this.formData, 'update')
				let res = await merchantUpdate(this.formData);
				uni.showToast({
					icon: 'none',
					title: '修改成功！'
				})
			},
			getQueryString(url) {
				let pattern = /(\w+)=(\w+)/ig; //定义正则表达式
				let parames = {}; // 定义参数对象
				url.replace(pattern, ($, $1, $2) => {
					parames[$1] = $2;
				});
				return parames;
			},
			goAuth() {
				console.log(location.href)
				let params = this.getQueryString(location.href);        //获取到URL
				if(params.regionserviceuser_id){
					this.formData.regionserviceuser_id = params.regionserviceuser_id
				}
				console.log(params)
				console.log(this.formData, 111)
				this.$refs.form1.validate().then(res => {
					if (this.token) {
						this.merchantUpdate()
						return false;
					}
					merchantRego(this.formData).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: '/my_pages/components/success?title=注册成功&type=index'
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.success {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.u-content {
			margin-top: 180rpx;
		}

		.title {
			margin-top: 90rpx;
		}

		.btn-succss {
			margin-top: 120rpx;
			width: 50%;
		}
	}

	::v-deep .adressDiv .u-form-item__body__right {
		align-items: flex-end;
	}

	.other-list {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		justify-content: space-between;
		width: 100%;

		.left {
			width: 20%;
		}

		.right {
			display: flex;
			align-items: center;
			flex: 1;

			.myAddress {
				display: flex;
				flex-direction: column;
				width: 100%;

				.cityAddres {
					display: flex;

					.top {
						flex: 1;
					}

					.city {
						color: #00C777;
						// width: 55px;
						display: flex;
						align-items: center;
					}
				}

				.address {}
			}
		}
	}

	.myAuth {
		padding: 30rpx;
	}

	::v-deep .u-input {
		background-color: #fff !important;
	}

	::v-deep .u-transition {
		overflow: scroll !important;
		height: 50vh !important;
	}

	.compony {
		display: flex;
		padding-top: 6px;
		padding-left: 9px;
		padding-right: 9px;
		height: 24px;
		border-radius: 4px;
		justify-content: space-between;

		.select {
			flex: 1;
		}
	}

	.botBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		/* width: 100%; */
		padding: 20rpx;
		margin-bottom: 100rpx;
	}

	.custom-style {
		width: 48% !important;
	}
</style>